@import url("./public.less");

#home {
  .module-box {
    margin: 0 .6rem;
    display: flex;
    flex-wrap: wrap
  }

  // tip占位
  .tip-wrapper {
    .spread();
    height: 48px;

    .tip-space {
      opacity: 0;
      min-height: 48px;
      box-sizing: border-box;
      padding: 13px 0;
      flex: 1;
      text-align: left;
      font-size: 16px;
      word-break: break-all;
      word-wrap: break-word;
      overflow: hidden;
    }
  }

  .content {
    // pad适配
    margin: 0 var(--home_margin);
    padding-bottom: 2.4rem;

    .service {
      padding-bottom: 0;
    }
  }
}

.guide {
  min-width: 22rem;
  box-sizing: border-box;
  padding: 1.2rem 1.6rem;
  background-color: #4d4d4d;
  color: #fff;
  font-size: var(--emui_text_size_body2);
  line-height: 1.9rem;
  border-radius: var(--emui_corner_radius_large);
  position: absolute;
  left: -3rem;
  top: -4.7rem;
  z-index: 100;
  box-shadow: 0 0.25rem 1.25rem 0 rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .know {
    margin-top: 1.6rem;
    align-self: flex-end;
  }

  &::after {
    content: "";
    width: 3.4rem;
    height: 0.8rem;
    background: url("../assets/sanjiaoxing.png") no-repeat center/contain;
    position: absolute;
    bottom: -0.7rem;
    left: 3rem;
  }

  // 锁
  // 氛围灯
  &.lock,
  &.light {
    left: auto;
    right: 0.6rem;
    top: 0.8rem;
    transform: translateY(-100%);

    &::after {
      left: auto;
      right: 1rem;
    }
  }

  // 车辆自检
  &.check {
    left: 0.6rem;
    top: 0.8rem;
    transform: translateY(-100%);
  }
}

.u-desc-title {
  padding-top: 1.6rem;
  margin-bottom: .2rem;
}

.u-desc {
  margin-bottom: .8rem;
}

.u-tip {
  margin-bottom: .2rem;
  font-size: 1.4rem;
  color: var(--emui_text_secondary);
}

.reconnect_list {
  font-size: 1.6rem;
  color: var(--emui_text_primary);
  padding-bottom: 0.2rem
}

.reconnect_tip {
  font-size: 1.4rem;
  color: var(--emui_text_secondary);
  margin-top: 0.6rem;
  text-align: left;
}

@media only screen and (min-width: 800px) {
  #status-bar {

    .box {
      margin: 0 1.8rem;
      display: flex;
    }

  }

  #home {
    .module-box {
      margin: 0 1.8rem;
      display: flex;
      flex-wrap: wrap
    }
  }


}

@media only screen and (min-width: 800px) {
  #versionInfo {
    .card {
      width: calc((100% - 10.8rem) / 8 * 6 + 5 * 1.2rem) !important;
      margin: 0rem auto 1.2rem !important;
    }

    .second {
      width: calc((100% - 10.8rem) / 8 * 6 + 5 * 1.2rem) !important;
      margin: 0 auto 1.2rem!important;
    }

    .titleSecond {
      width: calc((100% - 10.8rem) / 8 * 6 + 5 * 1.2rem) !important;
      margin: 0.6rem auto !important;
    }
  }

  .infoList {
    width: calc((100% - 10.8rem) / 8 * 6 + 5 * 1.2rem) !important;
    margin: 0 auto !important;
  }

  .bottom-btn {
    .btn {
      width: calc((100% - 10.8rem) / 8 * 3) !important;
    }
  }
}

@media only screen and (min-width: 600px) and (max-width:800px) {
  #versionInfo {
    .card {
      width: calc((100% - 10.8rem) / 8 * 6 + 5 * 1.2rem);
      margin: 0rem auto 1.2rem !important;
    }
  }
  .infoList {
    width: calc((100% - 10.8rem) / 8 * 6 + 5 * 1.2rem) !important;
    margin: 0 auto !important;
  }
  .bottom-btn {
    .btn {
      width: calc((100% - (9 * 1.2rem)) / 8 * 3) !important;
    }
  }
}
